<template>
    <div v-loading="loading">
        <el-dialog v-model="visible" title="客户列表" width="50%" align-center>
            <div>
                <el-form inline ref="formRef" hide-required-asterisk :model="formData" size="default">
                    <el-form-item label="昵称:" prop="name">
                        <el-input placeholder="请输入客户昵称" v-model="formData.name" />
                    </el-form-item>
                    <el-form-item label="手机号码:" prop="mobile">
                        <el-input placeholder="请输入客户手机号" v-model="formData.mobile" />
                    </el-form-item>
                    <el-form-item>
                        <el-space>
                            <el-button type="primary" @click="searchHandle" icon="Search">搜索</el-button>
                            <el-button type="danger" @click="resetForm" plain>重置</el-button>
                        </el-space>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-table :data="projectList">
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="mobile" label="手机号" />
                    <el-table-column prop="qiye_name" label="企业名称" />
                    <el-table-column prop="city_name" label="城市" />
                    <el-table-column prop="type_text" label="类型" />
                    <el-table-column label="操作" width="180">
                        <template #default="{ row }">
                            <el-space>
                                <el-button type="success" plain size="small" @click="deleteHandle(row)">分配人员</el-button>
                            </el-space>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-footer">
                <el-pagination layout="prev, pager, next" :total="paginationData.total" :page-size="paginationData.pageSize"
                    :current_page="paginationData.page" @current-change="pageChange" />
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, computed, watch, reactive } from 'vue'
import { getCustomList } from '@/api/user.js'
import { addxiangmukehu } from '@/api/supplier.js'

import { delay } from "@/utils";
import { toast } from "@/hook/toast";
import confirm from "@/libs/confirm";
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true,
    }
})

const formData = reactive({
    name: '',
    mobile: '',
    xiangmu_id: ''
})


const formLabelWidth = '140px'
const loading = ref(false)
const projectList = ref([])
const formRef = ref(null)

const paginationData = ref({
    total: 0,
    pageSize: 15,
    page: 1,
})

// 分页
function pageChange(val) {
    paginationData.value.page = val
    getUserList()
}
// 搜索
function searchHandle() {
    formRef.value.validate(() => {
        paginationData.value.page = 1
        projectList.value = []
        getUserList()
    })
}
// 重置
function resetForm() {
    formRef.value.resetFields()
    paginationData.value.page = 1
    formData.name = ''
    formData.mobile = ''
    projectList.value = []
    getUserList()
}

const emits = defineEmits(['update:modelValue', 'addSuccess'])
const visible = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emits('update:modelValue', value)
    }
})
function editHandle(row) {
    console.log('项目id', row)
    formData.xiangmu_id = row || ''

    visible.value = true
}
defineExpose({
    editHandle,
})

async function getUserList() {
    loading.value = true
    const { page } = paginationData.value
    const { name, mobile } = formData
    const payload = { page }
    if (!!name) {
        payload.name = name
    }
    if (mobile !== '') {
        payload.mobile = mobile
    }
    const resp = await getCustomList(payload).catch(() => {
    });
    const { code, data } = resp;
    const { total } = data
    paginationData.value.total = total;
    if (code !== 1) return loading.value = false;
    projectList.value = data.data;
    loading.value = false
}


// 分配客户 

function deleteHandle(row) {
    const kehu_id = row.id
    const { xiangmu_id } = formData
    const payload = { kehu_id, xiangmu_id }
    confirm({
        message: `您确定要分配么？`,
        title: '温馨提示!',
        confirmBtnText: '确定',
        cancelBtnText: '取消',
    }).then(() => confirmHandle(payload)).catch(() => {
    })
}

async function confirmHandle(e) {
    const resp = await addxiangmukehu(e)
    const { code, msg } = resp
    toast({ title: msg, type: code === 1 ? 'success' : 'error' })
    if (code !== 1) return
    visible.value = false
}

watch(() => props.modelValue, value => {
    if (!value) {
        return
    }
    getUserList()
})


</script>
<style scoped lang="scss">
.dialog-footer button:first-child {
    margin-right: 10px;
}

// width: 100%;
// height: 100%;
// box-sizing: border-box;
// background: #fff;
// border-radius: 4px;
// overflow: hidden;
// position: relative;
// box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
// padding: 16px 16px 0;

.page-footer {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
}
</style>